<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="shop-info-box">
					<view class="info-item flexWrap">
						<view>店铺名称</view>
						<view>{{storeInfo.shop_name}}</view>
					</view>
					<view class="info-item flexWrap" @tap="goPage('/page-home/setLocation')">
						<view>地址</view>
						<view class="flexWrapNo">
							<view>{{location}}</view>
							<text class="icon-more"></text>
						</view>
					</view>
					<view class="info-item flexWrap" @tap="openModel()">
						<view>客服电话</view>
						<view class="flexWrapNo">
							<view>{{customer_service_mobile||'未设置'}}</view>
							<text class="icon-more"></text>
						</view>
					</view>
					<view class="info-item flexWrap"
						@tap="goPage('/page-home/setBusinessTime?business_hours='+business_hours+'&is_today='+is_today)">
						<view>营业时间</view>
						<view>
							<block v-if="business_hours==24">{{business_hours}}小时营业 </block>
							<block v-else>{{showTime}}以外</block>
							<text class="icon-more"></text>
						</view>
					</view>
					<view class="info-item flexWrap">
						<view>店铺状态</view>
						<view>
							<block v-if="storeInfo.store_status_data=='business'">营业中</block>
							<block v-else-if="storeInfo.store_status_data=='rest'">休息中</block>
							<block v-else>维护中</block>
						</view>
					</view>
					<!-- <view class="info-item flexWrap" @tap="goPage('/moduleB/setLable')">
						<view>优惠标签</view>
						<view class="flexWrapNo">
							<text>{{label_txt}}</text>
							<text class="icon-more"></text>
						</view>
					</view> -->
					<!-- <view class="info-item flexWrap" @tap="goPage('/moduleB/setBlessing')">
						<view>店长寄语</view>
						<view class="flexWrapNo">
							<view class="blessing">{{blessing_txt}}</view>
							<text class="icon-more"></text>
						</view>
					</view> -->
					<view class="info-item">
						<view>店铺视频</view>
						<view class="attachment-box flexWrapNo">
							<view class="attachment-img" v-if="video_url">
								<image :src="video_url+'?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0,ar_auto'"></image>
								<image src="/static/user/close.png" class="close-btn" @tap="deleteVideo"></image>
							</view>
							<view class="add-btn" @tap="chooseVideo()" v-if="!video_url"></view>
						</view>
						<view class="attachment-tips">备注:视频显示在乒个乓自助小程序店铺首页,仅支持MP4格式横屏视频，不超过50M</view>
					</view>
					<view class="info-item">
						<view>店铺头图</view>
						<view class="attachment-box flexWrapNo">
							<view @tap="previewImage(item,imageList)" class="attachment-img"
								v-for="(item,index) in imageList" :key="index">
								<image :src="item"></image>
								<image src="/static/user/close.png" class="close-btn"
									@tap.stop="deleteImage(index)"></image>
							</view>
							<view class="add-btn" @tap="chooseImage()" v-if="imageList.length<3"></view>
						</view>
						<view class="attachment-tips">备注:图片显示在乒个乓自助小程序店铺首页,仅支持jpg、jpeg、png格式图片</view>
					</view>
				</view>
				<view class="bottom-box flexWrapNo">
					<!-- 已保存 -->
					<view class="define-btn" @tap="setStoreInfo()">确认无误并保存</view>
				</view>
				<view class="tips-box flexWarpCenterColumn" v-if="modelFlag">
					<view class="tips-name">客服电话设置</view>
					<view class="flexWrapNo" style="margin-top: 40upx;">
						<input placeholder="请输入客服电话" class="input-box" placeholder-class="placeholderClass"
							type="number" maxlength="11" v-model="customer_service_mobile" />
					</view>
					<view class="btn-box flexWrap">
						<view class="tips-btn" @tap="closeModel()">取消</view>
						<view class="tips-btn noStarted" @tap="setClose()">确定</view>
					</view>
				</view>
				
				<!--操作指引悬浮按钮 -->
				<guideline :path="'page-home/shopInfo'"></guideline>
				
				<view class="mask-wrap" v-if="modelFlag"></view>
			</view>
		</template>
	</view>
</template>

<script>
	import base from '@/common/base.js';
	export default {
		data() {
			return {
				pageOpc: 0,
				storeInfo: {},
				imageList: [],
				uploadList: [],
				modelFlag: false,
				imageLength: 3,
				video_url: "",
				thumbTempFilePath: "",
				franchisee_phone: "",
				customer_service_mobile: "",
				showTime: "",
				business_hours: "",
				location: "",
				is_today: 0,
				latitude: "",
				longitude: "",
				is_txMap: 0,
				setCustomer: 0,
				blessing_txt: "",
				label_txt: []
			}
		},
		onLoad(ops) {
			if (ops && ops.modelFlag == 1) {
				this.setCustomer = 1
				this.modelFlag = true
			}
			this.getStoreInfo();
		},
		onShow() {
			// this.getStoreInfo();
		},
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		methods: {
			closeModel() {
				this.customer_service_mobile = this.storeInfo.customer_service_mobile
				this.modelFlag = false
			},
			openModel() {
				this.modelFlag = true
			},
			setClose() {
				if (this.customer_service_mobile.length != 11) {
					this.$tools.showToast('请输入正确的手机号');
					return;
				}
				this.modelFlag = false
				this.setStoreInfo();
			},
			// 店铺信息
			getStoreInfo() {
				this.$request.post(this.$api.storeInfo, {
					store_id: uni.getStorageSync('store_id')
				}, {
					token: true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code == 1) {
						this.storeInfo = data
						if(data.shop_cover_images){
							this.imageList = data.shop_cover_images.split(',');
							this.uploadList = data.shop_cover_images.split(',');
						}
						this.video_url = data.video_url
						this.business_hours = data.business_hours
						this.location = data.location
						this.is_today = data.is_today
						this.latitude = data.latitude
						this.longitude = data.longitude
						this.customer_service_mobile = data.customer_service_mobile
						this.franchisee_phone = data.franchisee_phone
						this.is_txMap = data.is_tencent_map
						this.blessing_txt = data.blessing_txt
						this.label_txt = data.label_txt
						if (data.business_hours != '24') {
							let indexToInsert = Number(data.business_hours.indexOf('-')) + 1
							let todayText = data.is_today == 1 ? '当日' : '次日'
							let result = data.business_hours.split("");
							result.splice(indexToInsert, 0, todayText);
							this.showTime = result.join("")
						}
					}
				})
			},
			chooseImage: async function() {
				var that = this
				uni.chooseImage({
					count: this.imageLength - this.imageList.length,
					extension: ['.jpg', '.png', '.jpeg'],
					success: (res) => {
						console.log(res)
						for (let i in res.tempFilePaths) {
							var imgFiles = res.tempFilePaths[i]
							let suffix = res.tempFilePaths[i].split('.')[1]
							console.log(suffix)
							if (suffix != 'jpg' && suffix != 'png' && suffix != 'jpeg') {
								this.$tools.showToast('图片仅支持jpg、jpeg、png');
								return;
							}
							that.cutImageCallback(imgFiles);
						}
						that.imageList = that.imageList.concat(res.tempFilePaths)
					}
				})
			},
			deleteVideo(){
				this.video_url=""
			},
			chooseVideo() {
				var that = this
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: function(res) {
						let httpsHead = 'https://moyu24h-new.oss-cn-chengdu.aliyuncs.com/'
						that.$tools.loadIng('上传中,请稍后..')
						let video_url = res.tempFilePath
						base.aliyun_upload(video_url, function(r, err) {
							if (r) {
								console.log(httpsHead+r)
								that.video_url = httpsHead+r
								console.log(that.video_url+'?x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast')
								uni.hideLoading();
							}
						}, function(res) {
							console.log(res);
						}, 'mp4', 'video/')
					}
				});
			},
			cutImageCallback(content) {
				let that = this;
				let httpsHead = 'https://moyu24h-new.oss-cn-chengdu.aliyuncs.com/'
				that.$tools.loadIng('上传中,请稍后..')
				base.aliyun_upload(content, function(r, err) {
					if (r) {
						let uploadimg = httpsHead + r
						console.log(r)
						that.uploadList = that.uploadList.concat(uploadimg);
						uni.hideLoading();
					}
				})
			},
			//删除图片
			deleteImage(index) {
				console.log(index)
				this.imageList.splice(index, 1);
				this.uploadList.splice(index, 1);
			},
			setStoreInfo() {
				if (this.customer_service_mobile.length != 11) {
					this.$tools.showToast('请输入正确的手机号');
					return;
				}
				if (this.uploadList.length == 0) {
					this.$tools.showToast('请上传图片');
					return;
				}
				this.$request.post(this.$api.setStoreInfo, {
					store_id: uni.getStorageSync('store_id'),
					shop_cover_images: this.uploadList.join(','),
					business_hours: this.business_hours,
					location: this.location,
					is_today: this.is_today,
					customer_service_mobile: this.customer_service_mobile,
					franchisee_phone: this.franchisee_phone,
					latitude: this.latitude,
					longitude: this.longitude,
					video_url: this.video_url,
					is_txMap: 1,
					blessing_txt: this.blessing_txt,
					label_txt: this.label_txt
				}, {
					token: true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code == 1) {
						this.$tools.showToast('设置成功')
						if (this.setCustomer == 1) {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0 36upx;

		.shop-info-box {
			border-top: 1upx solid #36355E;

			.info-item {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40upx;
				color: #FFFFFF;
				padding: 30upx 0;
				border-bottom: 1upx solid #36355E;

				.blessing {
					@include ellipsis(1);
					width: 480upx;
				}

				&:nth-last-of-type(1) {
					border-bottom: none;
				}

				.icon-more {
					border-color: #FFFFFF;
				}

				.attachment-box {
					margin-top: 30upx;

					.add-btn {
						width: 162rpx;
						height: 162rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						border: 1upx solid #36355E;
						position: relative;
						margin-right: 20upx;

						&::after {
							content: "";
							display: inline-block;
							width: 40upx;
							height: 4upx;
							background: #36355E;
							position: absolute;
							left: 0;
							right: 0;
							top: 0;
							bottom: 0;
							margin: auto;
						}

						&::before {
							content: "";
							display: inline-block;
							width: 4upx;
							height: 40upx;
							background: #36355E;
							position: absolute;
							left: 0;
							right: 0;
							top: 0;
							bottom: 0;
							margin: auto;
						}
					}

					.attachment-img {
						width: 162rpx;
						height: 162rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						margin-right: 20upx;
						position: relative;

						:nth-of-type(3n) {
							margin-right: 0;
						}

						.close-btn {
							position: absolute;
							top: -10upx;
							right: -10upx;
							width: 40upx;
							height: 40upx;
						}
					}
				}

				.attachment-tips {
					font-size: 24upx;
					margin-top: 20upx;
				}
			}
		}

		.bottom-box {
			height: 120rpx;
			background: #1D1C5C;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;

			.define-btn {
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
				width: 322rpx;
				height: 80rpx;
				background: #26BCFD;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				text-align: center;
			}
		}

		.tips-box {
			width: 660upx;
			height: 452upx;
			background: #1D1C5C;
			border-radius: 16upx;
			position: fixed;
			top: 400upx;
			left: 0;
			right: 0;
			margin: auto;
			z-index: 999;

			.tips-name {
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 800;
				line-height: 50upx;
				color: #FFFFFF;
				margin-top: 44upx;
			}

			.tips-text {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				width: 560upx;
				margin-top: 12upx;
			}

			.line {
				width: 30upx;
				height: 2upx;
				background-color: #fff;
				margin: 0 20upx;
			}

			.input-box {
				height: 100upx;
				width: 500upx;
				background: #312F80;
				border-radius: 16upx;
				padding: 0 32upx;
				margin-top: 34upx;
				color: #fff;

				.triangle {
					border-top-color: #FFFFFF;
				}

				&:nth-of-type(1) {
					margin-top: 0;
				}

				input {
					height: 100upx;
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #fff;
				}

				.placeholderClass {
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, .5);
				}
			}

			.btn-box {
				margin-top: 56upx;

				.tips-btn {
					width: 260upx;
					height: 80upx;
					line-height: 80upx;
					text-align: center;
					border: 2upx solid #26BCFD;
					border-radius: 16upx;
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #26BCFD;
				}

				.noStarted {
					color: #FFFFFF;
					background-color: #26BCFD;
					margin-left: 28upx;
				}
			}
		}
	}
</style>